<template>
    <div :class="['contents',{'border':item.Layout==='border'}]">
        <h2>{{item.Subject}}</h2>
        <div class="list">
            <dl :class="{'active':activedInd===ind}" v-for="(val,ind) in item.Content" :key="ind" @click="chonse(ind,item.Subject,val.Type)">
                <dt v-if="val.Icon">
                    <img :src="val.Icon" alt="">
                </dt>
                <dd>{{val.Label}}</dd>
            </dl>
        </div>
    </div>
</template>

<script>
export default {
    props:["item"],
    data(){
        return {
            activedInd:0
        }
    },
    methods:{
        chonse(ind,sub,type){
            this.activedInd = ind;
            this.$emit('chooseFn',sub,type)
        }
    }
}
</script>

<style>
.contents{
    width: 100%;
    box-sizing: border-box;
}
h2{
    font-size: 18px;
    padding: 20px 0;
}
dl dd{
    text-align: center;
    font-size: 12px;
}
dl{
    padding-top: 10px;
}
.list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.contents .list dl{
    width: 20%;
    text-align: center;
    box-sizing: border-box;
}
.contents dl img{
    width: 50px;
    height: 50px;
}
.border dl{
    border: 1px solid #ccc;
    display: flex;
    box-sizing: border-box;
}
.border dl dt img{
    width: 15px;
    height: 15px;
}
dl.active{
    border: 1px solid red;
    box-sizing: border-box;
}
</style>
